<template>
  <div>
    <van-nav-bar :title="id==0?'公共频道':'音乐人频道'" left-text="返回" left-arrow @click-left="onClickLeft" class="back"/>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="qqMusicList" v-for="content in contents">
        <div class="qqLeft"><img :src="id==0?content.thumb:content.avatar" alt=""></div>
        <div class="qqRight">
          <div class="rightContent">
            <p class="first">{{content.name}}</p>
            <p class="second">{{id==0?content.cate_sname:"流行歌手"}}</p>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        result: '',
        id:this.$route.query.id,
        contents:[],
        title:"",
        isLoading: false
      }
    },
    created () {
      console.log(this.id)
      this.$axios.get('https://api.apiopen.top/musicBroadcasting')
        .then(res => {
          console.log(res.data.result[this.id])
          this.contents = res.data.result[this.id].channellist
        })
    },
    methods: {
      onClickLeft () {
        this.$router.go(-1)
      },
      onRefresh() {
        setTimeout(() => {
          this.$toast('刷新成功');
          this.isLoading = false;
          this.count++;
        }, 500);
      }
    }
  }
</script>

<style lang="less">
  .back {
    height: 4.4rem;
    line-height: 4.4rem;

    .van-nav-bar__left, .van-nav-bar__right {
      font-size: 1.5rem;
    }

    .van-nav-bar__title {
      font-size: 1.5rem;
    }

    .van-nav-bar__arrow {
      font-size: 1.5rem;
    }
  }

  .qqMusicList {
    width: 100%;
    height: 12rem;
    margin-bottom: 2rem;

    .qqLeft {
      float: left;
      width: 33%;
      height: 100%;
      padding-left: 1rem;

      img {
        display: inline-block;
        width: 12rem;
        height: 12rem;
        border-radius: 1rem;
      }
    }

    .qqRight {
      float: right;
      width: 66%;
      height: 100%;

      .rightContent {
        padding-top: 4rem;
        padding-left: 1rem;

        .first {
          font-size: 2rem;
        }

        .second {
          font-size: 1.2rem;
        }
      }

      p {
        margin-bottom: 0;
      }
    }
  }
</style>
